<template>
  <van-cell :label="label" :title="title" @click="toggle" class="comment-item">
    <template slot="icon">
      <div class="user-avatar">
        <van-image :src="avatar" />
        <i class="vip"></i>
      </div>
    </template>
    <div>
      <van-button @click.stop="onLike" size="small" class="btn-like btn-no-border">
        <van-icon :name="likeClassName" />
        <span>{{likeText}}</span>
      </van-button>
    </div>
    <div slot="right-icon" class="comment-item-body" @click.stop="onShowComment">
      <div class="comment-item-body__content">{{comment.content}}</div>
      <div class="comment-item-body__content" v-if="comment.images.length>0">
        <van-image
          width="100"
          :src="img"
          fit="scale-down"
          v-for="img in comment.images"
          :key="img"
        />
      </div>
      <div class="comment-item-body__extend">
        <span>{{comment.publishTime}}</span>
        <span class="dot-split" v-if="comment.replies>0">·</span>
        <span class="round" v-if="comment.replies>0">{{comment.replies}} 回复</span>
      </div>
      <ul class="comment-item-body__inners" v-if="comment.replies>10">
        <li v-for="(floor,fk) in comment.comments" :key="fk">
          <span>{{floor.author}}</span>
          ：{{floor.post}}
          <a v-if="floor.images.length>0" class="comment-item-body__inners-image">
            <van-icon name="photo-o" />查看图片
          </a>
        </li>
        <li>
          <span>查看全部{{comment.replies}}条回复</span>
        </li>
      </ul>
    </div>
  </van-cell>
</template>

<script>
import { Icon, Image, Cell, Button } from 'vant'
export default {
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Image.name]: Image,
    [Button.name]: Button
  },
  name: 'comment-item',
  props: {
    comment: Object
  },
  data () {
    return {
      //
      active: false,
      toggleAnimate: false,
      toggleColor: false
    }
  },
  methods: {
    toggle () {
      this.active = !this.active
      this.toggleAnimate = !this.toggleAnimate
      this.toggleColor = !this.toggleColor
    },
    onLike () {
      this.axios
        .post(
          '/cms/extend/like',
          {
            article_id: this.comment.article_id,
            comment_id: this.comment.id
          },
          {
            headers: { FastMode: true }
          }
        )
        .then(response => {
          this.comment.liked = response.data
          if (this.comment.liked) {
            this.comment.likes = Number(this.comment.likes) + 1
          } else {
            this.comment.likes = Number(this.comment.likes) - 1
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onShowComment () {
      console.log('onShowComment')
      this.pushNativelink(this.comment.link)
    }
  },
  computed: {
    title () {
      if (this.comment && this.comment.user) {
        return this.comment.user.nickname
      }
      return '外星人'
    },
    label () {
      if (this.comment && this.comment.user) {
        let tags = this.comment.user.tags
        return tags.join(' ')
      }
      return ''
    },
    avatar () {
      if (this.comment && this.comment.user) {
        return this.comment.user.avatar
      }
      return ''
    },
    likeClassName () {
      console.log(this.comment.liked)
      return this.comment.liked ? 'like' : 'like-o'
    },
    likeText () {
      return this.comment.likes ? this.comment.likes : '赞'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.comment-item {
  flex-flow: row wrap;
  .van-cell__value /deep/ {
    flex: none;
  }
  &-body {
    width: 100%;
    padding-left: 40px;
    &__content {
      color: #333;
      padding-top: 5px;
    }
    &__extend {
      font-size: 10px;
      font-weight: 300;
      padding: 5px 0;
      span {
        display: inline-block;
        height: 100%;
      }
      .round {
        background-color: #f5f5f5;
        border-radius: 20px;
        padding: 0 6px;
      }
    }
    &__inners {
      background: #f2f6f9;
      padding: 10px;
      border-radius: 3px;
      li {
        font-size: 85%;
        span {
          color: #4b608f;
        }
        a {
          color: #1a8ee5;
          .van-icon {
            font-size: 14px;
            margin: 0 2px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
